@extends('layouts.back_stage')
@section('style')
    @parent
    <style>
        .address {
            border-color: #cfdadd;
            border-radius: 2px;
            width: 25%;
            height: 30px;
            padding: 6px 10px;
            font-size: 12px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #cfdadd;
            box-shadow: none;
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        .name_color{color:#383838;width:100%;height:100%;padding:0 10px;display:block;}
        .people{width:48%;height:400px;overflow-y:auto;overflow-x:hidden;float:left;border:1px solid #ccc;margin-bottom:0;}
        .people li{width:100%;height:25px;line-height:25px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}
        .people li .name_color:hover{background:#3879d9;color:#fff;}
        .gang{width:4%;height:20px;line-height:20px;text-align:center;float:left;margin-top:180px;}
        .login_a{width:15px;height:15px;display:block;position:absolute;left:215px;top:7px;}
        .login_a img{width:15px;height:15px;display:block;}
        .modal-dialog{
            width:1080px;
        }
    </style>
@endsection
@section('content')
    <div class="container"><br/>
        <h3>{{ $info->name }}-虚拟区用户</h3><br/>
        <div class="pull-left" style="width: 100%;margin-bottom: 20px">
            <a class="btn btn-primary" style="float: right;margin-right:70px" data-toggle="modal" data-target="#myModal">添加用户</a>
        </div>
        <table class="table">
            <thead>
            <tr><th>序号</th><th>姓名</th><th>手机号</th><th>地址</th><th>操作</th></tr>
            </thead>
            <tbody>
            @if(isset($users) && count($users) > 0)
                @foreach($users as $k=>$v)
            <tr id="delete_{{ $v->id }}">
                <td>{{ $k+1 }}</td>
                <td>{{ $v->username }}</td>
                <td>{{ $v->user_tel }}</td>
                <td>{{ $v->user_area.$v->area_detail }}</td>
                <td>
                    <a href="javascript:;" onclick="deletePeople({{ $v->id }})" id="delete">删除</a>
                </td>
            </tr>
                @endforeach
            @endif
            </tbody>
        </table>
        {{--<div style="float: right">{{ $companies->links() }}</div>--}}
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                    </div>
                    <div class="modal-body">
                        <div class="container" style="width:100%;">
                            <div class="row">
                                <div style="margin-bottom:20px;position:relative;">
                                    <form class="filterform" action="#">
                                        <label>搜索:</label>
                                        <input class="address souInp filterform" style="width:200px" type="text" placeholder="输入" onkeydown="if(event.keyCode==13){return false;}">
                                        {{--<a href="javascript:;" class="login_a" style="display:none;"><img src="/img/00015.png"/></a>--}}
                                    </form>
                                </div>
                                <div style="width:100%;">
                                    <ul class="people allPeople">
                                        @if(isset($res) && count($res) > 0)
                                            @foreach($res as $k=>$v)
                                        <li><a href="javascript:;" class="name_color"><span id="{{ $v->id }}">{{ $v->username }}{{ $v->user_area }} {{ $v->area_detail }}</span></a></li>
                                            @endforeach
                                        @endif
                                    </ul>
                                    <div class="gang">>></div>
                                    <ul class="people addPeople">

                                    </ul>
                                    <button type='button' class='btn btn-success add_suc' style="margin-left:280px;margin-top:20px;">添加</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var area_id='{{ $_GET['id'] }}';
        var company_id='{{ $_GET['company_id'] }}';
        /*删除*/
        function deletePeople(id){
            $(".oText").text("确定要删除吗？");
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr("abc",id);
            $(".oBtn0").attr('id','');
            $(".oBtn0").attr('id','oDelete');
        }
        /*点确定*/
        $(document).on('click','#oDelete',function(){
            $(".oMask").hide();
            $(".oAnim").hide();
            var id=$(this).attr("abc");
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                type:'post',
                url:'/company/resetUserVirtual',
                data:{'user_id':id,'area_id':area_id,'company_id':company_id},
                dataType:'json',
                success:function (data) {
                    $(".faceImg").attr("src","/img/laugh.png");
                    $(".oHandle").text("删除成功");
                    $(".oSuccess").show(0).delay(1000).hide(0);
                    window.location.reload();
                }
            });
        });
        /*添加人数*/
        $(document).on("click",".allPeople li",function(){
            $message_peo = $(this).html();
            //console.log($message_peo);
            $(this).remove();
            $(".addPeople").append("<li>"+$message_peo +"</li>");
        });
        $(document).on("click",".addPeople li",function(){
            $message_peo = $(this).html();
            $(this).remove();
            $(".allPeople").append("<li>"+$message_peo +"</li>");
        });
        /*点击确定按钮*/
        $(".add_suc").click(function(){
            var s='';
            $(".addPeople li").each(function(){
                var id=$(this).children("a").children("span").attr("id");
                s=s+id+",";
            });
            var user_ids=s.substr(0, s.length - 1);
            if(user_ids==''){
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请先选择用户");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }else{
                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:'post',
                    url:'/company/setUserVirtualArea',
                    data:{
                        'user_ids':user_ids,
                        'area_id':area_id,
                        'company_id':company_id
                    },
                    dataType:'json',
                    success:function (data) {
                        if(data.success){
                            $(".faceImg").attr("src","/img/laugh.png");
                            $(".oHandle").text("添加成功");
                            $(".oSuccess").show(0).delay(1000).hide(0);
                            window.location.reload();
                        }else{
                            $(".faceImg").attr("src","/img/weep.png");
                            $(".oHandle").text(data.msg);
                            $(".oSuccess").show(0).delay(1000).hide(0);
                        }
                    }
                });
            }
        })
        /*搜索*/
        jQuery.expr[':'].Contains = function(a,i,m){
            return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
        };
        function filterList(header, list) {
            $(".souInp").change( function () {
                var filter = $(this).val();
                if(filter){
                    $matches = $(list).find('a:Contains(' + filter + ')').parent();
                    $('li', list).not($matches).slideUp();
                    $matches.slideDown();
                } else {
                    $(list).find("li").slideDown();
                }
                return false;
            }).keyup( function () {
                $(this).change();
            });
        }
        $(function () {
            filterList($("#form"), $(".allPeople"));
        });
        //叉号显示隐藏及清空
//        $(".souInp").on("input propertychange",function(){
//            if($(this).val()==""){
//                $(".login_a").hide();
//            }else{
//                $(".login_a").show();
//            }
//        })
//        $(".login_a").click(function(){
//            $(".souInp").val("");
//            $(".login_a").hide();
//        })
    </script>
@endsection